Vue.component('country-picker',{
    data:function(){
        return {
            cur:0,
            countryIndex:-1,
            provinceIndex:-1,
            cityIndex:-1,
            whichProvince:'',
            countrys:null,
            newP:null,
            citys:null,
        }
    },
    template:`
        <div id="countryPicker">
            <div class="countryPicker-head">
                <span v-for="(c,i) in ['国家','省份','城市']" @click="chooseTab(i)" :class="{'activeSpan-countryPicker':cur==i}">{{c}}</span>
            </div>
            <div class="countryPicker-content">
                <ul class="countryPicker-country" v-show="cur==0">
                    <li v-for="(country,index) in countrys" :key="index" @click="chooseCountry(index,country)" :class="{'activeSpan-countryPicker':countryIndex==index}">{{country.fName}}</li>
                </ul>
                <div v-if="!newP&&cur==1" style="line-height:40px;text-align:center;color:#aeaeae;">请选择上一级</div>
                <ul class="countryPicker-province scrollPart" v-show="cur==1&&newP">
                   
                    <li>
                         <p style="color:#CC0066;padding-left:5px;">A-G</p>
                        <ul class="countryPicker-provinceList">
                            <li v-for="(province,index) in provinceOne" :key="index" @click="chooseProvince(index,'one',province)" :class="{'activeSpan-countryPicker':provinceIndex==index&&whichProvince=='one'}">
                                {{province.fName}}
                            </li>
                        </ul>    
                    </li>
                    <li>
                         <p style="color:#CC0066;line-height:40px;padding-left:5px;">H-K</p>
                        <ul class="countryPicker-provinceList">
                            <li v-for="(province,index) in provinceTwo" :key="index" @click="chooseProvince(index,'two',province)" :class="{'activeSpan-countryPicker':provinceIndex==index&&whichProvince=='two'}">
                                {{province.fName}}
                            </li>
                        </ul>    
                    </li>
                    <li>
                         <p style="color:#CC0066;line-height:40px;padding-left:5px;">L-S</p>
                        <ul class="countryPicker-provinceList">
                            <li v-for="(province,index) in provinceThree" :key="index" @click="chooseProvince(index,'three',province)" :class="{'activeSpan-countryPicker':provinceIndex==index&&whichProvince=='three'}">
                                {{province.fName}}
                            </li>
                        </ul>    
                    </li>
                    <li>
                         <p style="color:#CC0066;line-height:40px;padding-left:5px;">T-Z</p>
                        <ul class="countryPicker-provinceList">
                            <li v-for="(province,index) in provinceFour" :key="index" @click="chooseProvince(index,'four',province)" :class="{'activeSpan-countryPicker':provinceIndex==index&&whichProvince=='four'}">
                                {{province.fName}}
                            </li>
                        </ul>    
                    </li>
                  
                
                  </ul>

                  <ul class="countryPicker-city" v-show="cur==2">
                       <li v-for="(city,index) in citys" @click="chooseCity(index,city)" :class="{'activeSpan-countryPicker':cityIndex==index}">
                         {{city.fName}}
                       </li>

                  </ul>

            </div>
        </div>
    
    `,
    computed:{
        provinceOne:function(){
            if(this.newP){

                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>96&&item.fInitial.charCodeAt(0)<104
                })
            }
            
        },
        provinceTwo:function(){
            if(this.newP){
                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>103&&item.fInitial.charCodeAt(0)<108
                })
            }
        },
        provinceThree:function(){
            if(this.newP){
                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>107&&item.fInitial.charCodeAt(0)<116
                })
            }
        },
        provinceFour:function(){
            if(this.newP){
                return this.newP.filter(function (item) {
                    return item.fInitial.charCodeAt(0)>115
                })
            }
        },

    },
    mounted: function () {
       
    },
    created:function(){
     
        this.getData(-1)
    //     let p= this.provinces;
    //     this.newP = p.sort(function(a,b){
    //        return a.str.charCodeAt() - b.str.charCodeAt();
    //    })
    //    console.log(this.provinceOne)
        
    //     console.log(this.newP)
        const head = document.getElementsByTagName('head')[0];
        const css = document.getElementById('countryPicker_css');
        if(!css){
            const style = document.createElement('style');
            let styleStr=`
                #countryPicker{
                    width:320px;
                    // height:410px;
                    //background:#fff;
                    z-index:999;
                }
                .activeSpan-countryPicker{
                    background:#C4E1F8;
                }
                .countryPicker-head{
                    width:100%;
                }
                .countryPicker-head span{
                    display:inline-block;
                    width:70px;
                    height:32px;
                    line-height:30px;
                    text-align:center;
                    border:1px solid #B1D7F6;
                    border-radius:2px;
                    border-bottom:none;
                    margin-right:2px!important;
                    cursor:pointer;
                }
                .countryPicker-content{
                    border:1px solid #B1D7F6;
                    border-radius:2px;
                    width:100%;
                    min-height:40px;
                    background:#fff;
                    // height:382px;
                }
                .countryPicker-country{
                    width:100%;
                    overflow:auto;
                    display:flex;
                    justify-content:flex-start;
                    flex-wrap:wrap;
                    padding:10px;
                    // height:380px;
                }
               
                .countryPicker-country li{
                    display:inline-block;
                    width:25%;
                    height:30px;
                    line-height:30px;
                    cursor:pointer;
                    padding-left:5px;
                }
                .countryPicker-province{
                    width:100%;
                    max-height:380px;
                    overflow-y:scroll;
                    padding:10px;
                }
                .countryPicker-provinceList{
                   
                    display:flex;
                    justify-content:flex-start;
                    flex-wrap:wrap;
                    
                }
                .countryPicker-provinceList li{
                    display:inline-block;
                    width:20%;
                    height:30px;
                    line-height:30px;
                    cursor:pointer;
                    padding-left:5px;
                }
                .countryPicker-city{
                    display:flex;
                    justify-content:flex-start;
                    flex-wrap:wrap;
                    padding:0 10px;
                }
                .countryPicker-city li{
                    width:20%;
                    text-align:center;
                    cursor:pointer;
                }

                .scrollPart{                                                                            
                    width:100%;                                                                         
                    max-height:380px;                                                                      
                    background:#fff;                                                                    
                    overflow:auto;                                                                      
                    overflow-y:scroll;
                    padding:10px;                                                                  
                }                                                                                       
                                                                                                        
                .scrollPart::-webkit-scrollbar {                                                                                                                                      
                    width: 6px;                                                                                                                                                              
                    height: 1px;                                                                        
                }                                                                                       
                                                                                                        
                .scrollPart::-webkit-scrollbar-thumb {                                                  
                                                                                                        
                    border-radius: 10px;                                                                
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);                               
                    background: rgba(48, 137, 213, 0.3);                                                
                    transition: all 0.2s;                                                               
                }                                                                                       
                                                                                                        
                .activeS::-webkit-scrollbar-thumb {                                                     
                   background: rgba(47, 183, 236, 1) !important;                                        
                }                                                                                       
                                                                                                        
                .scrollPart::-webkit-scrollbar-track {                                                  
                                                                                                        
                    border-radius: 10px;                                                                
                    background: #EDEDED;                                                                
                }   



            
            `;
            style.innerHTML = styleStr;
            style.id = 'countryPicker_css'
            head.appendChild(style)
        }
    },
    methods:{
     
        getData:function(id){
            let that = this;
            $.ajax({
                url:'http://www.dev-zuma.com/wxpublic_web/region/queryAll',
                data:{fParentId:id},
                success:function(res){
                   //console.log(res.data,'rrr')
                   if(that.cur==0){
                    that.countrys = res.data
                    //console.log(that.countrys)
                   }else if (that.cur==1) {
                       that.newP = res.data.sort(function(a,b){
                            return a.fInitial.charCodeAt() - b.fInitial.charCodeAt();
                       })
                       //console.log(that.newP,'nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn')
                   }else if(that.cur==2){
                     that.citys = res.data
                   }
                   
                },
                error:function(err){
                    console.log(err)
                }
            })
        },
        chooseTab:function(index){
            this.cur = index;
        },
        chooseCountry:function(index,country){
            this.countryIndex = index;
            this.cur = 1
            this.getData(country.fId)
            this.$emit('choose-city-value',country,'country');
        },
        chooseProvince:function(index,types,province){
            this.provinceIndex = index;
            this.whichProvince=types
            this.cur = 2;
            this.getData(110000)
            //console.log(this.whichProvince)
            this.$emit('choose-city-value',province,'province');
        },
        chooseCity:function(index,city) {
            this.cityIndex = index;
            this.$emit('choose-city-value',city,'city');
            console.log(city,'选择的城市')
        }
    },
})